<template>
  <div class="books-page">
    <!-- circular：是否循环 -->
    <block v-if="swipers.length">
      <swiper
        class="swiper-box"
        indicator-active-color="#2d8cf0"
        :indicator-dots="true"
        :interval="3000"
        :autoplay="true"
        :circular="true"
      >
        <swiper-item
          v-for="(chunkSwipers , chunkIndex) in swipers"
          :key="chunkIndex"
        >
          <image
            class="slide-image"
            mode="aspectFit"
            v-for="(item , index) in chunkSwipers"
            :key="index"
            :src="item.image"
            @click="goBookDetail(item.isbnCode)"
            :lazy-load="true"
          />
        </swiper-item>
      </swiper>
      <BookCard v-for="item in totalBooks" :key="item._id" :book="item" />
    </block>
    <div class="no-data" v-else>
      <image
        :src="noData"
        mode="scaleToFill"
        :lazy-load="true"
      />
    </div>
    <i-message id="message" />
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex';
  import chunk from 'lodash.chunk';
  import requestData from '@/utils/request';
  import BookCard from '@/components/BookCard';
  import { $Message } from '../../../static/iview-weapp/base/index';
  export default {
    data () {
      return {
        page: 1,
        totalBooks: [],
        noData: require('../../../static/images/no-data.png'),
      }
    },
    async onShow () {
      this.getSwiper(); // 获取轮播图
      await this.getBooks({
        page: this.page,
      });
      this.totalBooks = this.booksInfo.list;
    },
    async onPullDownRefresh () { // 下拉刷新
      this.getSwiper(); // 获取轮播图
      this.page = 1;
      await this.getBooks({
        page: this.page,
      });
      this.totalBooks = this.booksInfo.list;
      wx.stopPullDownRefresh({
        success: () => {
          $Message({
            content: '刷新完成',
          });
        }
      });
    },
    async onReachBottom () { // 上拉加载更多
      if (this.totalBooks.length === this.booksInfo.total) { // 已经加载完
        $Message({
          content: '已无更多数据',
        });
        return false;
      }
      this.page ++; // 这里要先进行page累加，不能直接使用this.page++作为参数，否则会多走一次paeg=1的请求
      await this.getBooks({
        page: this.page,
      });
      this.totalBooks.push(...this.booksInfo.list); // 使用concat也可以
    },
    components: {
      BookCard,
    },
    methods: {
     ...mapActions('bookModule', ['getSwiper', 'getBooks']),
     goBookDetail (isbnCode) {
        wx.navigateTo({
          url: `/pages/bookDetail/main?isbnCode=${isbnCode}`
        });
      }
    },
    computed: {
      ...mapState('bookModule', {
        swipers (state) {
          const chunkSwipers = chunk(state.swipers, 3);
          return chunkSwipers;
        },
        booksInfo (state) {
          return state.booksInfo;
        }
      })
    },
  }
</script>

<style lang="less" scoped>
  .books-page {
    margin: 0 20rpx;
    .swiper-box {
      margin-top: 20rpx;
      .slide-image {
        width: 33.33%;
        height: 300rpx;
        &:active {
          background-color: #f7f5f5;
        }
      }
    }
  }
</style>